<template>
	<view class="container">
		<view class="serach-wrap">
			<view class="search_box">
				<view class="search_img">
					<image
						src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/9616de5fd2f72e4c639ee1295f861eb564f7e690.png"
						mode=""></image>
				</view>
				<input type="text" placeholder="请输入你想搜索的商品" placeholder-style="font-size: 24rpx;color:#D9D9D9"
					v-model="keyword" confirm-type="search" @confirm="doSearch">
				<view class="search-btn" @tap='doSearch'>搜索</view>
			</view>
		</view>
		<view class="wrap">
			<!-- 轮播图 -->
			<view class="swiper-wrap" v-if='swiperList.length > 0'>
				<swiper class="swiper-con" autoplay="true" indicator-dots='true' indicator-color='#EC1818'
					indicator-active-color='#fff'>
					<swiper-item v-for="(item,index) in swiperList" :key="index" @tap="toDetail(item)">
						<view class="img">
							<base-img :src="item.image"></base-img>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 全部商品 -->
			<view class="goods-wrap">
				<view class="goods-con" v-if='goodsList.length > 0'>
					<view class="goods-item-con" v-for='(item,index) in goodsList' @tap='jumpGoodsDetail(item.g_id)'
						v-if="goodsList.length > 0 && item.id_dividend != 1">
						<goods-item :goodsType='1' :item='item' @handleGoods='handleGoods(item)'
							@getPoster='getPoster'></goods-item>
					</view>
				</view>
				<no-data text="暂无数据" v-else></no-data>
				<view class="loding-con" style="margin-top: 20rpx;">
					<view class="loding-end line_center" v-if='loadEnd'>
						<view>-</view>
						<view class="end-t">已经到底啦</view>
						<view>-</view>
					</view>
					<view class="loding line_center" v-else>
						<uni-icons type='spinner-cycle' size="30" color='#707070'
							class="distributor-anim distributor-anim-rotate distributor-anim-loop"></uni-icons>
						正在加载中~~
					</view>
				</view>
			</view>
		</view>



		<!-- 商品购买弹窗 -->
		<modal :showModal='showGoodsModal'>
			<buy-modal :showBuyModal='showGoodsModal' :goodsDetail='goodsDetail' @close='close'></buy-modal>
		</modal>
		<button class="kefu" open-type="contact">
			<image src='/static/kefu.png'></image>
		</button>
	</view>
</template>

<script>
	const app = getApp()
	import goodsItem from '@/components/goods-item/goods-item.vue';
	export default {
		components: {
			goodsItem,
		},
		data() {
			return {
				scrollLeft: 0,
				tabIndex: 0,
				goodsList: [],
				loadEnd: true,
				page: 1,
				swiperList: [],
				totalPage: '',
				keyword: '',
				showGoodsModal: false,
				goodsDetail: {}
			}
		},
		onLoad(opt) {
			// this.getGoods()

		},
		onShow() {
			this.getGoods()
		},
		onReachBottom() {
			let that = this;
			if (that.page < that.totalPage) {
				this.loadEnd = false;
				that.page++;
				// that.getGoods()
			} else {
				this.loadEnd = true;
				return;
			}
		},
		onPullDownRefresh() {
			this.reload()
		},



		methods: {
			doSearch: function() {
				this.swiperList = [];
				this.goodsList = [];
				// this.page = 1;
				// this.totalPage = '';
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.getGoods()
			},
			toDetail(item){
				if(!item.content){
					return;
				}
				uni.navigateTo({
					url:`/pages/goods-page/swiper-detail/swiper-detail?id=${item.id}`
				})
			},
			/* 刷新方法 */
			reload() {
				this.swiperList = [];
				this.cateList = [];
				this.goodsList = [];
				// this.page = 1;
				// this.totalPage = '';
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.getGoods();
				uni.stopPullDownRefresh()
			},
			/* 获取商品列表 */
			getGoods() {
				let that = this;
				app.globalRequest({
					api: app.getApi().mall.goodList,
					data: {
						keyword: that.keyword
					}
				}).then(res => {
					if (res.code == 1) {
						that.swiperList = res.data.lblist
						res.data.goodList.forEach(v => {
							v.priceObj = app.splicePrice(v.price);
							v.num = 1;
						})
						that.goodsList = res.data.goodList;
					}
				}).catch(err => {

				})
			},
			jumpGoodsDetail(g_id) {
				uni.navigateTo({
					url: `/pages/goods-page/goods-detail/goods-detail?type=1&goods_id=${g_id}`
				})
			},
			/* 点击购物车 */
			handleGoods(item) {

				item.num = 1;
				this.goodsDetail = item;
				this.showGoodsModal = true;
			},
			close() {
				this.showGoodsModal = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		// margin:0 24rpx;
		padding-bottom: 100rpx;
	}

	.serach-wrap {
		width: 100%;
		height: 88rpx;
		background: #fff;
		position: fixed;
		left: 0;
		z-index: 222;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.search_box {
		width: 686rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		border: 2rpx solid #EC1818;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 0 4rpx 0 24rpx;
		box-sizing: border-box;

		input {
			width: 100%;
			height: 100%;
			line-height: 70rpx;
			box-sizing: border-box;
			font-size: 24rpx;
		}

		.search_img {
			width: 40rpx;
			height: 40rpx;
			margin-right: 16rpx;
			flex-shrink: 0;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.search-btn {
			width: 132rpx;
			height: 60rpx;
			background: #E31717;
			border-radius: 36rpx;
			color: #fff;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
		}
	}
	.wrap{
		padding-top:88rpx;
		margin:0 32rpx;
	}

	.goods-wrap {

		.title {
			font-size: 36rpx;
		}

		.goods-con {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			box-sizing: border-box;
		}

		.goods-item-con {
			margin-top: 24rpx;
		}
	}

	.swiper-wrap {
		width: 100%;
		height: 312rpx;
		overflow: hidden;
		transform: translateY(0);
		margin: 24rpx auto 0;
		border-radius: 8rpx;

		.swiper-con {
			width: 100%;
			height: 100%;

			swiper-item {
				width: 100%;
				height: 100%;

				.img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.no_box {
		width: 520rpx;
		height: 400rpx;
		margin: 250rpx auto;

		image {
			width: 100%;
			height: 100%;
		}
	}
	.kefu {
		width: 48rpx;
		height: 48rpx;
		position: fixed;
		right: 38rpx;
		bottom: 200rpx;
		z-index: 222;
		image {
			width: 100%;
			height: 100%;
		}
	}
</style>